<template>
  <a-layout-content style="margin: 0 16px">


    <div :style="{ padding: '24px', background: '#fff', minHeight: '30px' }">
      <p class="titleMess">配置信息</p>
      <a-divider />
      <a-form
        ref="detailInfo"
        :model="detailInfo"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item  label="押金金额" name="depositAmount" class="ml">
          <a-input
            v-model:value="detailInfo.depositAmount"
            autoComplete="off"
            :maxLength="40"
          />
        </a-form-item>
        <a-form-item label="积分抵扣" name="integralRatio" class="ml">
          <a-input
            v-model:value="detailInfo.integralRatio"
            autoComplete="off"
            :maxLength="40"
          />
        </a-form-item>
        <a-form-item label="积分比例" name="pointsRatio" class="ml">
          <a-input
            v-model:value="detailInfo.pointsRatio"
            autoComplete="off"
            :maxLength="40"
          />
        </a-form-item>
        <a-form-item label="优惠券ID" name="awardId" class="ml">
          <a-input
            v-model:value="detailInfo.awardId"
            autoComplete="off"
            :maxLength="40"
          />
        </a-form-item>
        <a-form-item label="租借消息备注" name="leaseRemark" class="ml">
          <a-input
            v-model:value="detailInfo.leaseRemark"
            autoComplete="off"
            :maxLength="40"
          />
        </a-form-item>
        <a-form-item label="归还消息备注" name="backRemark" class="ml">
          <a-input
            v-model:value="detailInfo.backRemark"
            autoComplete="off"
            :maxLength="40"
          />
        </a-form-item>
        <a-form-item  label="客服电话" name="customerServiceCenter" class="ml">
          <a-input
            placeholder="填写客服电话"
            v-model:value="detailInfo.customerServiceCenter"
            autoComplete="off"
            :maxLength="40"
          />
        </a-form-item>
        <a-form-item
          label="关于我们"
          name="aboutUs"
          :required="true"
        >
          <a-textarea
            v-model:value="detailInfo.aboutUs"
            placeholder="填写说明，最多400字"
            style="min-height: 180px;width: 300px"
            auto-size
            :maxLength="400"
          />
        </a-form-item>
       <div class="butDiv">
         <a-button type="primary" @click="goback" style="margin-bottom: 20px"
         >确定</a-button
         >
       </div>
      </a-form>
    </div>

  </a-layout-content>
</template>

<script>
  import { detailBladeSetting, updateBladeSetting } from "@/api/umbrella/bladeSetting";
  export default {
    components: {
    },
    data() {
      return {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
        detailInfo:{
          depositAmount:null,
          integralRatio:null,
          pointsRatio:null,
          customerServiceCenter:null,
          aboutUs:null
        },
        param:{
          id:1
        }
      }
    },
    created() {
      this.getDetailInfo();
    },

    methods: {
      goback(){
        console.log(       this.detailInfo)
        updateBladeSetting(this.detailInfo).then(res=>{
          if(res.success){
            this.$message.success(res.msg)
            this.getDetailInfo();
          }
        })
      },
        getDetailInfo(){
          detailBladeSetting({id:1}).then(res =>{
            console.log(res)
            this.detailInfo = res.data
          })
        }
    }
  }
</script>

<style scoped lang="less">
  .butDiv{
    display: flex;
    justify-content: flex-end;
  }
  .titleMess {
    font-size: 18px;
  }
  .ant-divider {
    margin: 15px 0;
  }
  .ant-form {
    .ant-select {
      width: 170px;
      margin-right: 10px;
    }
    .ant-input {
      width: 200px;
    }
    .ant-upload-list {
      width: 200px;
    }
  }
  .addBtn {
    margin-top: 20px;
  }
  .tishi {
    margin-left: 5px;
    font-size: 12px;
    color: #7f7f7f;
  }
  .ant-form-item {
    display: flex;
  }
  .add_btn,
  .del_btn {
    padding: 0 10px;
    cursor: pointer;
    margin-left: 10px;
  }
  .getId {
    font-size: 12px;
    margin-left: 10px;
  }
  .ml{
    margin-left:15px ;
  }
</style>
